<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- <link rel="stylesheet" href="css/element.css"> -->
    <title>Hello, world!</title>
    <style>
        ul li {
            list-style: none;
        }

        .page{
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: center;
            align-content: center;
        }
        .page li{
            /* width: 30px;
            height: 30px; */
            padding: 0 5px;
        }
        .page li a{
            padding:3px 8px;
            text-decoration: none;
        }
        .page li a.active,.page li a:hover{
            background-color: #3E79BF;
            color: #ffffff;
        
        }

        .op{
            display: flex;
            justify-content: flex-end;
        }

        .op a{
            padding:0 5px;
        }

        [v-cloak]{
            display: none;
        }
    </style>
  </head>
  <body>
    <div class="container-fluid" id="app" style="padding-bottom: 50px;" v-cloak>
        <h3>信息列表</h3> 
        <hr>
        <p class="op">
            <a style="text-decoration: none;" href="#" @click.prevent="excel">【导出】</a>
            <a href="index.html">添加</a>
        </p>
        
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>录入时间</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>学历</th>
                    <th>应届</th>
                    <th>提升</th>
                    <th>电话</th>
                    <th>微信</th>
                    <th>工作城市</th>
                    <th>工作与行业</th>
                    <th>是否参与测试</th>
                    <th>原因</th>
                    <th>期望薪资</th>
                    <th>是否系统培训</th>
                    <th>关于我们</th>
                    <th>其他企业有了解过吗</th>
                    <th>班级</th>
                    <th>管理</th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="list.length==0">
                    <td colspan="19" class="text-center">暂无数据O(∩_∩)O</td>
                </tr>
                <tr v-for="val in list" :key="val.id" v-else>
                    <td>{{val.id}}</td>
                    <td>{{val.ctime|formateDate}}</td>
                    <td>{{val.uname}}</td>
                    <td>{{val.sex}}</td>
                    <td>{{val.collage|formateCollage}}</td>
                    <td>{{val.fresh|formateFresh}}</td>
                    <td>{{val.improve?'是':"否"}}</td>
                    <td>{{val.tel}}</td>
                    <td>{{val.wechat}}</td>
                    <td>{{val.work_city}}</td>
                    <td>{{val.work}}</td>
                    <td>{{val.is_test}}</td>
                    <td>{{val.reason}}</td>
                    <td>{{val.salary}}</td>
                    <td>{{val.training}}</td>
                    <td>{{val.we_do}}</td>
                    <td>{{val.other_company}}</td>
                    <td>{{val.class_name}}</td>
                    <td>
                        <a :href="'studentEdit.html?id='+val.id">修改</a>
                        <a href="javascript:;" @click="deleteStudent(val.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <ul class="page block-center">
            <li>共{{count_rows}}条数据，每页{{pageSize}}条，共{{totalPage}}页</li>
            <li v-for="index in totalPage">
                <a href="#" 
                :class="index == page ? 'active' : ''"
                @click.prevent="currPage(index)">{{index}}</a>
            </li>
        </ul>
    </div>

    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/dayjs.min.js"></script>
    <script src="js/list.js"></script>
  </body>
</html>